import React from 'react'
import { Button, Popconfirm } from 'antd'
import { CancelBubble } from 'common/js/dom'
import { cloneObj } from 'common/js/util'
import { accountRoleArr, accountStatusArr } from 'common/js/module'

const EditButton = (row, index, that, str = '编辑', styles) => {
  return (
    <Button
      className="marginR5"
      type="primary"
      size="small"
      style={styles}
      onClick={
        (e) => {
          const data = cloneObj({ row, index })
          that.editClick(data)
          CancelBubble(e)
        }
      }
    >
      {str}
    </Button>
  )
}

const DeleteButton = (row, index, that, styles) => {
  return (
    <Popconfirm
      title="你确认删除这条数据吗?"
      placement="topRight"
      okText="确认"
      cancelText="取消"
      style={styles}
      onVisibleChange={
        (visible) => {
          if (!visible) {
            setTimeout(() => {
              that.cancelBubble = false
            }, 200)
          }
        }
      }
      onConfirm={
        () => {
          that.deleteClick(cloneObj({ row, index }))
        }
      }
    >
      <Button
        className="dangerBtn"
        type="danger"
        size="small"
        onClick={
          (e) => that.cancelBubble = true
        }
      >删除</Button>
    </Popconfirm>
  )
}

const hideContent = (content, row, index) => {
  return (
    <div style={{
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap'
      }}>{content}</div>
  )
}

export const accountListThead = (that) => [
  {
    dataIndex: 'role',
    title: '账户角色',
    align: 'center',
    width: 90,
    render: (role, row) => {
      const arr = accountRoleArr.filter(item => item.key === role)
      const content = arr[0] ? arr[0].value : ''

      return <span>{content}</span>
    }
  }, {
    dataIndex: 'userName',
    title: '账户名',
    align: 'center',
    width: 120
  }, {
    dataIndex: 'phone',
    title: '账户手机',
    align: 'center',
    width: 120
  }, {
    dataIndex: 'businessName',
    title: '商户名字',
    render: (name, params) => {
      return hideContent(name, params)
    }
  }, {
    dataIndex: 'address',
    title: '商户地址',
    render: (address, params) => {
      return hideContent(address, params)
    }
  }, {
    dataIndex: 'telephone',
    title: '商户座机',
    align: 'center',
    width: 120
  }, {
    dataIndex: 'status',
    title: '账户状态',
    align: 'center',
    width: 90,
    render: (status, params) => {
      const arr = accountStatusArr.filter(item => item.key === status)
      const content = arr[0] ? arr[0].value : ''

      return (
        <span style={{
          color: status === 1 ? 'green' : 'red'
        }}>{content}</span>
      )
    }
  }, {
    title: '操作',
    width: 130,
    align: 'center',
    render: (content, row, index) => {
      return (
        <div>
          {
            EditButton(row, index, that)
          }
          {
            DeleteButton(row, index, that)
          }
        </div>
      )
    }
  }
]

export const moneyListThead = (that) => [
  {
    key: 'userName',
    title: '账户名'
  }, {
    key: 'sysj',
    title: '有效时间',
    align: 'center'
  }, {
    key: 'beginTime',
    title: '创建时间',
    align: 'center',
    render: (h, params) => {
      const { isForever, sysj, beginTime } = params.row
      const content = isForever === 1 ? sysj : beginTime
      return h('span', {}, content)
    }
  }, {
    key: 'endTime',
    title: '结束时间',
    align: 'center',
    render: (h, params) => {
      const { isForever, sysj, endTime } = params.row
      const content = isForever === 1 ? sysj : endTime
      return h('span', {}, content)
    }
  }, {
    key: 'isForever',
    title: '是否长期有效',
    align: 'center',
    width: 110,
    render: (h, params) => {
      const { isForever } = params.row
      const content = isForever === 1 ? '是' : '否'

      return h('span', {
        style: {
          color: isForever === 1 ? 'green' : 'red'
        }
      }, content)
    }
  }, {
    title: '操作',
    key: 'action',
    width: 80,
    align: 'center',
    render: (h, params) => {
      return h('div', [
        EditButton(h, params, that)
      ])
    }
  }
]
